<template>
  <div id="equman">
    <!-- 装备管理 -->
    <h1
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: #344563;
      "
    >
      装备管理
    </h1>
    <el-form
      :inline="true"
      :model="formData"
      class="demo-form-inline"
      style="width: 1140px"
    >
      <el-form-item label="装备信息" label-width="100px">
        <el-input
          v-model="formData.id"
          placeholder="输入装备编号"
          style="width: 224px"
        ></el-input>
      </el-form-item>
      <el-form-item label="使用单位" label-width="100px">
        <el-select
          v-model="formData.useunitId"
          placeholder="请选择使用单位"
          style="width: 224px"
        >
          <el-option label="全部" :value="null"></el-option>
          <el-option
            v-for="v in useunits"
            :label="v.useunitName"
            :value="v.id"
            :key="v.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" " label-width="100px">
        <el-button type="info" @click="resetFn"
          ><i class="el-icon-refresh-right"></i>重置</el-button
        >
        <el-button type="primary" @click="checkFn"
          ><i class="el-icon-search"></i>查询</el-button
        >
        <el-button type="success" @click="toAdd"
          ><i class="el-icon-plus"></i>新增</el-button
        >
      </el-form-item>
      <el-form-item label="装备分类" label-width="100px">
        <el-select
          v-model="formData.equipmentclassificationId"
          placeholder="全部"
          style="width: 224px"
        >
          <el-option label="全部" :value="null"></el-option>
          <el-option
            v-for="v in equipmentClasses"
            :label="v.equipmentClassName"
            :value="v.id"
            :key="v.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="筹措方式" label-width="100px">
        <el-select
          v-model="formData.modalities"
          placeholder="全部"
          style="width: 224px"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="分配" value="0"></el-option>
          <el-option label="自购" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="装备状态" label-width="100px">
        <el-select
          v-model="formData.state"
          placeholder="全部"
          style="width: 224px"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="0"></el-option>
          <el-option label="维修中" value="1"></el-option>
          <el-option label="停用" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="idChangeFn"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column label="装备编号" width="170" align="center">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="装备名称" width="170" align="center">
        <template slot-scope="scope">{{
          scope.row.equipmentName.equipName
        }}</template>
      </el-table-column>
      <el-table-column label="装备分类" width="170" align="center">
        <template slot-scope="scope">{{
          scope.row.equipmentClass.equipmentClassName
        }}</template>
      </el-table-column>
      <el-table-column label="装备状态" width="170" align="center">
        <template slot-scope="scope">
          {{ scope.row.state | stateFn }}
        </template>
      </el-table-column>
      <el-table-column label="价格" width="170" align="center">
        <template slot-scope="scope">{{ scope.row.price }}</template>
      </el-table-column>
      <el-table-column label="筹措方式" width="170" align="center">
        <template slot-scope="scope">{{
          scope.row.modalities == 0 ? "分配" : "自购"
        }}</template>
      </el-table-column>
      <el-table-column label="使用单位" width="170" align="center">
        <template slot-scope="scope">{{
          scope.row.useunits.useunitName
        }}</template>
      </el-table-column>
      <el-table-column label="存放位置" width="170" align="center">
        <template slot-scope="scope">{{
          scope.row.storageLocation.storageLocationName
        }}</template>
      </el-table-column>
      <el-table-column label="责任人" width="170" align="center">
        <template slot-scope="scope">{{
          scope.row.responsiblePerson
        }}</template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="danger" plain size="mini" @click="toSee(scope.row)"
            ><i class="el-icon-view" style="font-size: 15px"></i
          ></el-button>
          <el-button type="primary" plain size="mini" @click="toEdit(scope.row)"
            ><i class="el-icon-edit-outline" style="font-size: 15px"></i
          ></el-button>
          <el-button
            type="warning"
            plain
            size="mini"
            @click="openDel(scope.row.id)"
            ><i class="el-icon-delete" style="font-size: 15px"></i
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="footer">
      <el-link type="danger" :underline="false" @click="openBatchDel"
        ><i class="el-icon-delete"></i> 删除</el-link
      >
      <div class="block">
        <el-pagination
          @current-change="pageBtn"
          :current-page.sync="page"
          :page-size="count"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      useunits: [],
      equipmentClasses: [],
      formData: {
        id: null, //装备编号
        useunitId: null, //使用单位
        equipmentclassificationId: null, //装备分类
        modalities: "", //筹措方式
        state: "", //装备状态
      },
      page: 1,
      count: 5,
      total: 0,
      tableData: [],
      searchId: [],
    };
  },
  filters: {
    stateFn: function (n) {
      switch (n) {
        case 0:
          return "正常";
          break;
        case 1:
          return "维修中";
          break;
        case 2:
          return "停用";
          break;
      }
    },
  },
  methods: {
    render: function () {
      this.$axios({
        url: "/equipment/list",
        method: "post",
          data:{
            id: this.formData.id,
            useunitId: this.formData.useunitId,
            equipmentclassificationId: this.formData.equipmentclassificationId,
            modalities: this.formData.modalities,
            state: this.formData.state,
          },
        params: {
          limit: this.count,
          page: this.page,
        },
      }).then(({ data }) => {
        // console.log(data.data[0]);
        if (data.code == 0) {
          this.tableData = data.data;
          this.total = data.total;
        } else {
          this.$message.error("获取数据失败!");
        }
      });
    },
    pageBtn(val) {
      this.page = val;
      this.render();
    },
    checkFn: function () {
      this.render();
    },
    resetFn: function () {
      this.formData = {};
      this.render();
    },
    toAdd: function () {
      this.$router.push("/home/ZbglAdd");
    },
    toEdit: function (v) {
      this.$store.state.yqy.equManEdit=v;
      sessionStorage.setItem('equManEdit',JSON.stringify(v))
      this.$router.push("/home/ZbglEdit");
    },
    toSee: function (v) {
      this.$store.state.yqy.equManSee=v;
      sessionStorage.setItem('equManSee',JSON.stringify(v))
      this.$router.push("/home/ZbglSee");
    },
    idChangeFn(val) {
      this.searchId=val
    },
    openDel(id) {
      this.$confirm("此操作将永久删除该条装备数据, 确认删除?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            url:"/equipment/delete",
            method:"delete",
            params:{
              id:id,
            }
          }).then(({data})=>{
            if(data.code==0){
              this.page=1;
              this.$message.success("删除成功!");
              this.render();
            }else{
              this.$message.error("删除失败!");
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    openBatchDel() {
      let ids=[];
      this.searchId.forEach((v)=>{
        ids.push(v.id)
      })
      // console.log(ids);
      this.$confirm("此操作将永久删除选中的装备数据, 确认删除?", "批量删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          this.$axios({
            url:"/equipment/deleteidss",
            method:"delete",
            data:ids,
          }).then(({data})=>{
            if(data.code==0){
              this.page=1;
              this.$message.success("批量删除成功!");
              this.render();
            }else{
              this.$message.error("批量删除失败!");
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted: function () {
    sessionStorage.removeItem('equManSee');
    this.render();
    this.$axios({
      url: "/equipment/preselect",
    }).then(({ data }) => {
      if (data.code == 0) {
        this.equipmentClasses = data.equipmentClasses;
        this.useunits = data.useunits;
      } else {
        this.$message.error("获取下拉菜单数据失败!");
      }
    });
  },
};
</script>

<style scoped lang="less">
#equman {
  padding: 30px 30px 30px 30px;
  h1 {
    margin-bottom: 20px;
  }
  .footer {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>